<template>
  <view class="container">
    <uni-card is-full :is-shadow="true">
      <text class="uni-h6">面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text>
    </uni-card>
    <uni-section title="基础用法" type="line" padding>
      <uni-breadcrumb separator="/">
        <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
          {{route.name}}
        </uni-breadcrumb-item>
      </uni-breadcrumb>
    </uni-section>
    <uni-section title="自定义分隔符" type="line" padding>
      <uni-breadcrumb separator=">">
        <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
          {{route.name}}
        </uni-breadcrumb-item>
      </uni-breadcrumb>
    </uni-section>
  </view>

  <view>
    <uni-section title="仅显示点: is-dot 属性" type="line" padding>
      <scroll-view  scroll-y="true" class="scroll-Y">
        <view v-for="item in items" style="height: 100rpx; background-color: lightblue;">
          <uni-badge class="uni-badge-left-margin" :is-dot="false" :text="item" absolute="rightTop" size="small">
            <view class="box"><text class="box-text">圆点</text></view>
          </uni-badge>
        </view>
      </scroll-view>
    </uni-section>

    <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>

    <button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">获取手机号</button>

    <view  class="controls-title">图标</view>

  </view>
</template>

<script setup lang="ts">
import {onReady} from "@dcloudio/uni-app";

const value = 2
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']

function getPhoneNumberHandler(e) {
      console.log(e.detail);
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        // 这里可以将加密数据和iv发送到服务器解密
        console.log('Encrypted Data:', e.detail.encryptedData);
        console.log('IV:', e.detail.iv);
      } else {
        console.log('用户拒绝授权获取手机号');
      }
    }

onReady( () => {
    var context = uni.createCanvasContext('firstCanvas')
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  })

const routes = [
  {
    to: "/pages/index/index",
    name: "首页",
  },
  {
    to: "",
    name: "菜单 A",
  },
  {
    to: "",
    name: "菜单 B",
  },
]

</script>

<style scoped lang="scss">
.scroll-Y {
  width: 375rpx;
  height: 300rpx;
}
cover-view,
cover-image {
  display: inline-block;
}
.controls-title {
  //width: 100%;
  //text-align: center;
  color: #4cd964;
}

@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
}
.test {
  font-family: iconfont;
  margin-left: 20rpx;
}

.controls-title{
  background-color: #007aff;
  height: 100rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 100rpx;
}

</style>
